.comment-section {
  // padding: 16rpx;
  background: #fff;
  max-height: calc(100vh - 240rpx);
  overflow-y: auto;
}

.comment-header {
  margin-bottom: 20rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  .comment-count {
    // margin-left: 8rpx;
    font-size: 24rpx;
    color: #999;
  }
}

.comment-loading {
  text-align: center;
  padding: 60rpx 0;
  .loading-text {
    margin-left: 12rpx;
    font-size: 24rpx;
    color: #999;
  }
}

.comment-list {
  .comment-item {
    display: flex;
    gap: 16rpx;
    margin-bottom: 24rpx;
    padding: 10rpx;
    border-radius: 8rpx;
    // 点击评论时的背景效果
    &:active {
      background-color: #f5f5f5;
    }
    
    .comment-avatar {
      width: 64rpx;
      height: 64rpx;
      flex-shrink: 0;
    }
    .comment-content-wrap {
      flex: 1;
      .comment-header-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8rpx;
        .commentor-name {
          font-size: 24rpx;
          color: #333;
          font-weight: 500;
        }
        .comment-time {
          font-size: 20rpx;
          color: #999;
        }
      }
      .comment-desc {
        font-size: 26rpx;
        color: #333;
        line-height: 40rpx;
        margin-bottom: 12rpx;
      }
    }
  }
}

.reply-list {
  margin-top: 16rpx;
  // margin-left: 64rpx;
  padding-left: 16rpx;
  border-left: 2rpx solid #eee;
  .reply-item {
    margin-bottom: 16rpx;
    .comment-desc {
      .reply-at {
        color: #4D80F0;
      }
    }
  }
  .reply-toggle {
    margin-top: 8rpx;
    margin-left: 80rpx;
    .toggle-text {
      font-size: 20rpx;
      color: #4D80F0;
    }
  }
}

.empty-comment {
  text-align: center;
  padding: 80rpx 0;
  .empty-img {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 24rpx;
  }
  .empty-text {
    font-size: 24rpx;
    color: #999;
  }
}

.load-more, .no-more {
  text-align: center;
  padding: 20rpx 0;
  .load-more-text, .no-more-text {
    font-size: 22rpx;
    color: #999;
    margin-left: 8rpx;
  }
}

.comment-input-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 16rpx 24rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
  z-index: 99;
  .input {
    flex: 1;
    height: 68rpx;
    background: #f5f5f5;
    border-radius: 34rpx;
    padding: 0 24rpx;
  }
  .word-count {
    position: absolute;
    right: 140rpx;
    bottom: 20rpx;
    font-size: 20rpx;
    color: #999;
    pointer-events: none;
  }
  .send-btn {
    width: 100rpx;
    height: 68rpx;
    border-radius: 34rpx;
    font-size: 24rpx;
  }
}